<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>步骤条(Flowsteps) - 设计模式库</title>
	<link rel="stylesheet" href="flowsteps.css"/>
	<style>
		body{padding:10px;}
	</style>
</head>
<body>
    <h3 class="s-title">CSS</h3>
	<div class="s-section">
		<a href="../reset/reset.css">reset.css</a> +
		<a href="flowsteps.css">flowsteps.css</a>
	</div>

    <h3 class="s-title">Demo</h3>
    <div class="s-section">

        <h4>3步</h4>
        <div class="s-demo">
            <!-- {{{ flowsteps -->
            <div class="flowsteps">
                <ol class="num3">
                    <li class="current"><span class="first">1. Breakfast</span></li>
                    <li class="next"><span>2. Lunch</span></li>
                    <li><span class="last">3. Dinner</span></li>
                </ol>
            </div>
            <!-- flowsteps }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

        <h4>4步</h4>
        <div class="s-demo">
            <!-- {{{ flowsteps -->
            <div class="flowsteps">
                <ol class="num4">
                    <li class="done"><span class="first">1. Done</span></li>
                    <li class="current"><span>2. Current</span></li>
                    <li class="next"><span>3. Step</span></li>
                    <li><span class="last">4. Step</span></li>
                </ol>
            </div>
            <!-- flowsteps }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

        <h4>5步</h4>
        <div class="s-demo">
            <!-- {{{ flowsteps -->
            <div class="flowsteps">
                <ol class="num5">
                    <li class="done"><span class="first">1. Prd</span></li>
                    <li class="done"><span>2. Prototype</span></li>
                    <li class="done"><span>3. Mockup</span></li>
                    <li class="current"><span>4. Demo</span></li>
                    <li class="next"><span class="last">5. Code</span></li>
                </ol>
            </div>
            <!-- flowsteps }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

        <h4>6步</h4>
        <div class="s-demo">
            <!-- {{{ flowsteps -->
            <div class="flowsteps">
                <ol class="num6">
                    <li class="done "><span class="first">1. New Project</span></li>
                    <li class="done"><span>2. Overtime</span></li>
                    <li class="done"><span>3. Overtime</span></li>
                    <li class="done"><span>4. Overtime</span></li>
                    <li class="done"><span>5. Overtime</span></li>
                    <li class="current"><span class="last">6. 挂～</span></li>
                </ol>
            </div>
            <!-- flowsteps }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>
    </div>
</body>
</html>
